<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-card style="width: 600px;height: 700px;margin:0 auto">
      <el-form :model="p"  ref="p" :rules="rules" label-width="80px">
        <el-form-item label="商品标题" prop="title">
          <el-input type="text" v-model="p.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input type="text" v-model="p.price"></el-input>
        </el-form-item>
        <el-form-item label="商品原价" >
          <el-input type="text" v-model="p.old_price"></el-input>
        </el-form-item>
        <el-form-item label="销量" >
          <el-input type="text" v-model="p.sale_count"></el-input>
        </el-form-item>
        <el-form-item label="库存" >
          <el-input type="text" v-model="p.num"></el-input>
        </el-form-item>
        <el-form-item label="到期日期" prop="day">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="商品赏味期限" v-model="p.day" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="商品类别" prop="serverId">
          <el-select v-model="p.server_id" placeholder="请选择">
            <el-option
                v-for="item in serverIdList"
                :key="item.serveId"
                :label="item.serveName"
                :value="item.serveId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" prop="url">
          <el-upload
              name="pic"
              :limit=1
              action="http://localhost:9081/product/upload"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-button type="primary" @click="send()">
            发布商品
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      rules: {
        title: [
          { required: true, message: '请输入商品标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur'},
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
        ],
        day: [
          { required: true},
        ],
        url: [
          { required: true},
        ],
        serverId: [
          { required: true },
        ],
      },
      value:'',
      serverIdList:[],
      dialogImageUrl: '',
      dialogVisible: false,
      p:{server_id:'',title:"",price:"",old_price:"",sale_count:"",num:"",categoryId:"",url:"",day:"",overdue:""}
    };
  },
  methods: {
    goBack(){
      //返回上一页面
      history.back();
    },
    send(){
      if(this.p.url==""||this.p.categoryId==""||this.p.day==""||this.p.num==""||this.p.price==""
      ||this.p.overdue==""||this.p.old_price==""||this.p.sale_count==""||this.p.server_id==""
      ||this.p.title==""){
        this.$message.error("请将内容填写完整后再试!")
        return;
      }
      let url="http://localhost:9081/product/insert"
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .post(url,this.p).then((response)=> {
        this.$message.success("添加商品完成!")
        location.href="http://localhost:8080/sys-product/temp/products/ProductAddNew";
        console.log("send方法走完了")
      })
    },
    handleRemove(file, fileList) {
      let url="http://localhost:9081/product/remove"
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .get(url+file.response).then((response)=> {
        this.$message.success("删除完成!")
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response,file,fileList){
      this.p.url=response;
    },
    loadServerId(){
      console.log("开始执行loadServerId```")
      let url="http://localhost:9081/serve"
      console.log("url="+url)
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .get(url).then((response)=>{
        console.log("服务器返回的数据,放入serverIdList:")
        console.log(response.data)
        let responseBody = response.data;
        this.serverIdList=responseBody.data
      })
    }
  },
  mounted() {
    this.loadServerId();
  }
}

</script>

<style scoped>

</style>